<template>
  <view class="container">
    <view class="score-board">
      <text>Time: {{ timeLeft }}</text>
      <text>Score: {{ score }}</text>
    </view>
    <view class="color-word" :style="{color: inkColor}" v-if="gameStarted">{{ colorWord }}</view>
    <view class="buttons">
      <button class="button start-button" @click="submitAnswer('YES')" v-if="gameStarted">YES</button>
      <button class="button reset-button" @click="submitAnswer('NO')" v-if="gameStarted">NO</button>
    </view>
    <view class="buttons">
      <button class="button start-button" @click="startGame" v-if="!gameStarted">Start Game</button>
      <button class="button reset-button" @click="resetGame" v-if="gameStarted">Reset Game</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
      timeLeft: 60,
      colors: ['red', 'black','orange'],
	  // colors: ['red', 'blue', 'green', 'black','pink','purple','orange','gray'],
	  
      colorWord: '',
      inkColor: '',
      gameStarted: false,
      timer: null
    };
  },
  methods: {
    startGame() {
	  this.resetGame(); // Reset game before starting
      this.gameStarted = true;
      this.nextColor();
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--;
        } else {
          this.endGame();
        }
      }, 1000);
    },
    resetGame() {
      this.score = 0;
      this.timeLeft = 60;
      this.gameStarted = false;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    nextColor() {
      const colorIndex = Math.floor(Math.random() * this.colors.length);
      const inkIndex = Math.floor(Math.random() * this.colors.length);
      this.colorWord = this.colors[colorIndex];
      this.inkColor = this.colors[inkIndex];
    },
    submitAnswer(answer) {
      const correct = (this.colorWord === this.inkColor);
      if ((answer === 'YES' && correct) || (answer === 'NO' && !correct)) {
        this.score++;
      } else {
        this.score--;
      }
      this.nextColor();
    },
    endGame() {
      this.gameStarted = false;
      clearInterval(this.timer);
      uni.showModal({
        title: 'Game Over',
        content: `Your final score is: ${this.score}`,
        showCancel: false,
        success: () => this.resetGame()
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.score-board {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
}

.score-board text {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 18px;
  font-weight: bold;
}

.color-word {
  font-size: 36px;
  font-weight: bold;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px; /* Rounded corners for card effect */
  background-color: #ffffff; /* Card background color */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Card shadow effect */
  user-select: none;
  display: inline-block; /* Allows the card to size according to its content */
  transition: transform 0.3s ease-in-out; /* Smooth transformation on hover */
}

.color-word:hover {
  transform: scale(1.05); /* Slightly larger on hover for an interactive effect */
}

.buttons {
  display: flex;
  justify-content: center;
  width: 100%;
}

.button {
  border: none;
  padding: 15px 30px;
  margin: 10px;
  border-radius: 25px;
  color: white;
  font-size: 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.1s;
  user-select: none;
}

.button:hover {
  cursor: pointer;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.start-button {
  background-color: #4CAF50;
}

.reset-button {
  background-color: #f44336;
}

@media screen and (max-width: 480px) {
  .button {
    padding: 10px 20px;
    font-size: 16px;
  }
}
</style>
